<template>
    <div class="d-flex">
        <div style="height: 100vh; width: 15%">
            <a-menu
                mode="inline"
                style="height: 100%"
                :inline-collapsed="collapsed"
            >
                <a-menu-item v-for="item in routerList" :key="item.key">
                    <router-link :to="{ name: item.name}">
                        {{ item.content }}
                    </router-link>
                </a-menu-item>
            </a-menu>
        </div>
        <div style="width: 85%">
            <router-view/>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            collapsed: false,
            routerList: [
                { key: 'noticeManage', name: 'noticeManage', content: '综合数据管理' },
                { key: 'archivesManage', name: 'archivesManage', content: '档案管理' },
                { key: 'verifyManage', name: 'verifyManage', content: '申请流程管理' },
                { key: 'graphicList', name: 'graphicList', content: '选房管理' },
            ]
        };
    },
    methods: {
        toggleCollapsed(){
            this.collapsed = !this.collapsed;
        },
    },
};
</script>
